<template>
	<div class="yh_content foSi14">
		<div class="dis disAl disJuB pad0" style="border: none;height: 28px;">
			<div style="line-height: 1;font-size: 16px;font-weight: 700;">数据概览</div>
			<el-popover popper-class="popo" placement="bottom" width="680" trigger="click">
				<div class="wid100">
					<div class="wid95 mar dis disAl" :class="index !== 0?'mar-top5':''" v-for="(item, index) in tsList"
						:key="index">
						<div class="fowe800">{{item.title}}</div>
						<div>{{item.text}}</div>
					</div>
				</div>
				<svg-icon slot="reference" icon-class="tishi" class="mar0 cuPo"
					style="color: #6b7cdd;width: 20px;height: 20px;" />
			</el-popover>
		</div>
		<div class="mar-top10 dis flwa" style="padding-left: 10px;">
			<div v-for="(item, index) in overviewList" :key="index" class="member-analysis__overview-item poRel"
				:class="overviewId === item.id?'curr':''" @click.stop="overviewClick(item.id)">
				<div class="member-analysis__overview-title">{{item.name}}</div>
				<div class="member-analysis__overview-value">{{item.text}}</div>
				<img src="../../icons/png/jia.png" class="poAbs"
					style="right: 16px;width: 40px;height: 40px;top: 32px;"></img>
			</div>
		</div>
		<div class="dis mar-top20">
			<div class="mar-left5">
				<div class="foSi13" style="height: 20px;color: #838383;">姓名/手机号</div>
				<el-input v-model="name" size="small" placeholder="姓名/手机号" />
			</div>
			<div class="mar-left10" style="padding-top: 20px;">
				<el-button type="primary" size="small" @click.stop="suosouClick">查询</el-button>
				<el-button type="primary" class="mar-left5" size="small">导出报表</el-button>
			</div>
		</div>
		<div style="margin-top: 20px">
			<el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
					</div>
					<div class="title">暂无数据</div>
				</div>
				<el-table-column prop="realname" label="会员姓名" />
				<el-table-column prop="tel" label="手机号" />
				<el-table-column prop="hjgw" label="会籍顾问" />
				<el-table-column prop="bycs" label="本月上课次数" />
				<el-table-column prop="sycs" label="上月上课次数" />
				<el-table-column prop="90cs" label="近90天上课次数" />
				<el-table-column prop="120cs" label="近120天上课次数" />
				<el-table-column prop="card_num" label="卡数量" />
				<el-table-column prop="zc" label="剩余资产金额" />
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>
	</div>
</template>

<script>
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	// import fetchList from '@/api/article'
  import {
    dataOverview,
    memberAnalysis
  } from '@/api/information';
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination

	export default {
		name: 'memberAnalysis',
		components: {
			Pagination
		},
		data() {
			return {
				overviewList: [],
				overviewId: 0,
				name: '',
				list: [],
				total: 0,
				listLoading: false,
				listQuery: {
					page: 1,
					limit: 10
				},
				tsList: [{
						title: '会员总数：',
						text: '系统中全部会员数量，实时数据，统计延迟10分钟'
					},
					{
						title: '有效会员数：',
						text: '持有有效会员卡的会员数量（会员剩余资产金额>0），实时数据，统计延迟10分钟'
					},
					{
						title: '本月上课会员：',
						text: '本月1日到昨日上课次数>0的会员数量'
					},
					{
						title: '上月上课会员：',
						text: '上月上课次数>0的会员数量'
					},
					{
						title: '风险会员：',
						text: '发卡时间大于90天，且近90天未上课的有效会员'
					},
					{
						title: '沉寂会员：',
						text: '发卡时间大于120天，近120天未上课，且剩余资产金额大于50元'
					},
					{
						title: '流失会员：',
						text: '发卡时间大于120天，近120天未上课，且剩余资产金额小于50元'
					},
					{
						title: '统计时间：',
						text: '非特殊说明，统计截止到昨日的数据'
					}
				]
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '会员活跃分析',
				url: '/information/memberAnalysis',
				pd: true
			},
      //   {
			// 	name: '访客转化分析',
			// 	url: '/information/guestToMemberAnalysis',
			// 	pd: true
			// },
        {
				name: '贡献度排行',
				url: '/information/memberCostRanking',
				pd: true
			},
      //   {
			// 	name: '耗卡排行',
			// 	url: '/information/memberCardConsumptionRanking',
			// 	pd: true
			// }
      ]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		methods: {
			overviewClick(id) {
				console.log(id)
				console.log(this.overviewId)
				if (id !== this.overviewId) {
					this.overviewId = id
					this.listQuery.page = 1
					this.getList()
				}
			},
			suosouClick() {
				this.listQuery.page = 1
				this.getList()
			},
			getList() {
				this.listLoading = true
        var data = {
          type:0,
          limit:this.listQuery.limit
        }
        memberAnalysis(data).then(response => {
          const {
            data
          } = response
          this.overviewList = data.count
          this.list = data.list.data
          this.total = data.list.total
          this.listLoading = false
        });
			}
		}
	}
</script>

<style scoped>
	.yh_content {
		padding: 20px;
	}

	.member-analysis__overview-item {
		margin: 0 10px 10px 0;
		width: 260px;
		height: 104px;
		background: #fff;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 20px 16px 0;
		transition: all .3s;
		border: 1px solid #e0dfe4;
		cursor: pointer;
	}

	.member-analysis__overview-item:hover {
		transform: scale(1.05);
	}

	.curr {
		transform: scale(1.05);
		border: 1px solid #6b7cdd;
		box-shadow: 0 2px 6px 5px rgba(242, 242, 242, .5);
	}

	.member-analysis__overview-title {
		font-size: 12px;
		color: #787878;
	}

	.member-analysis__overview-value {
		margin-top: 20px;
		font-size: 28px;
		font-weight: 700;
		line-height: 1;
	}
</style>
